import { useEffect, useState } from 'react'
import { useRouter } from 'next/router';

import Axios from '../../services/request'

import style from '../../styles/h-news.module.scss'
import { formatDatetime } from '../../utils';
export default function HomeNews() {
    const [news, setNews] = useState([])
    const router = useRouter();

    const goDetail = (val) => {
        router.push(`/detail/[id]`, `/detail/${val}`);
    }
    const getNews = (params) => {
        Axios.get(`/api/moment?page=${params.page}&size=${params.size}`).then(res => {

            setNews(res.data.data)

        })
    }
    useEffect(() => {
        getNews({ page: 1, size: 5 })
    }, [])


    return (
        <div className={style.TagsWrapper}>
            <div className={style.title}>
                <i className="iconfont">&#xe61e;</i>
                最新文章
            </div>
            <div className={style.ul}>
                {
                    news.map(item => (
                        <div className={style.li} key={item.id} onClick={e => goDetail(item.id)}>
                            <div className={style.imgBox}>
                                <img src={item.img_url} alt="" />
                            </div>
                            <div className={style.item_right}>
                                <h3>{item.title}</h3>
                                <span>{formatDatetime(item.create_time, 'yyyy-MM-dd hh:mm:ss')}</span>
                            </div>
                        </div>
                    ))
                }


            </div>
        </div>
    )
}
